<template>
  <transition name="input-animation">
    <div
      v-if="isShow"
      class="input-transition input-verifycode-box"
    >
      <mivaInput
        class="input-verifycode"
        v-model="verifycode.value"
        :isShow="true"
        :tip="verifycode.tip"
        :state="verifycode.state"
        :placeholder="`请输入${signTypeTrasnfrom(sign.signType)}验证码`"
      />
      <el-button
        class="item-btn btn-get-verifycode"
        type="primary"
        :loading="verifycode.sending"
        @click="$emit('click')"
        v-html="`获取${signTypeTrasnfrom(sign.signType)}验证码`"
      />
    </div>
  </transition>
</template>

<script>
// item
import mivaInput from './miva-input.vue';

export default {
  name: 'input-verifycode',
  components: {
    mivaInput,
  },
  props: ['sign', 'verifycode', 'isShow'],
  methods: {
    signTypeTrasnfrom(signType) {
      const obj = {
        phone: '短信',
        email: '邮箱',
      };
      return obj[signType] || '';
    },
  },
};
</script>

<style lang="less">
@import '~@/styles/variables.less';

.input-verifycode-box {
  width: 100%;
  display: flex;
  align-items: center;
  .input-verifycode {
    width: 100%;
    padding-top: 0 !important;
  }
  .btn-get-verifycode {
    height: 40px;
    margin-left: 10px;
    position: relative;
    background-color: @navButton;
    border-color: @navButton;
    border-radius: 30px;
  }
}
</style>
